<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/global.css">
</head>
<body>

<div class="fly-header layui-bg-black">
    <div class="layui-container">
        <a class="fly-logo" href="/">
            <img src="/images/logo.png" alt="layui">
        </a>
        <ul class="layui-nav fly-nav layui-hide-xs">
            <li class="layui-nav-item layui-this">
                <a href="/"><i class="iconfont icon-jiaoliu"></i>交流</a>
            </li>
            <li class="layui-nav-item">
                <a href="case/case.html"><i class="iconfont icon-iconmingxinganli"></i>案例</a>
            </li>
            <li class="layui-nav-item">
                <a href="http://www.layui.com/" target="_blank"><i class="iconfont icon-ui"></i>框架</a>
            </li>
        </ul>

        <ul class="layui-nav fly-nav-user">
            <!-- 未登入的状态 -->
            <li class="layui-nav-item">
                <a class="iconfont icon-touxiang layui-hide-xs" href="user/login.html"></a>
            </li>
            <li class="layui-nav-item">
                <a href="user/login.html">登入</a>
            </li>
            <li class="layui-nav-item">
                <a href="user/reg.html">注册</a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/app/qq/" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入"
                   class="iconfont icon-qq"></a>
            </li>
            <li class="layui-nav-item layui-hide-xs">
                <a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" title="微博登入"
                   class="iconfont icon-weibo"></a>
            </li>
        </ul>
    </div>
</div>

<div class="layui-container fly-marginTop">
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title">
                <li><a href="/login">登入</a></li>
                <li class="layui-this">注册</li>
            </ul>
            <div class="layui-form layui-tab-content" id="LAY_ucm" style="padding: 20px 0;">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form layui-form-pane">
                        <form method="post" action="/register/save">
                            <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
                            <div class="layui-form-item">
                                <label for="L_email" class="layui-form-label">邮箱</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_email" name="email" required lay-verify="email"
                                           autocomplete="off" class="layui-input" th:value="${session.user.email}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">将会成为您唯一的登入名</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_username" class="layui-form-label">昵称</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_username" name="nickName" required lay-verify="required"
                                           autocomplete="off" class="layui-input"  th:value="${session.user.nickName}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_pass" class="layui-form-label">密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_pass" name="passWord" required lay-verify="required"
                                           autocomplete="off" class="layui-input" th:value="${session.user.passWord}">
                                </div>
                                <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_repass" class="layui-form-label">确认密码</label>
                                <div class="layui-input-inline">
                                    <input type="password" id="L_repass" name="repass" required lay-verify="required"
                                           autocomplete="off" class="layui-input"  th:value="${session.user.passWord}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label for="L_vercode" class="layui-form-label">邮箱验证码</label>
                                <div class="layui-input-inline">
                                    <input type="text" id="L_vercode" name="verificationCode" required
                                           lay-verify="required"
                                           placeholder="请填写您收到的邮箱验证码" autocomplete="off" class="layui-input"  th:value="${session.verificationCode}">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <!--lay-filter="*" 删除该设置-->
                                <button class="layui-btn" lay-filter="register" lay-submit>立即注册</button>
                                <button id="sendEmail" type="button" class="layui-btn layui-btn-warm">发送验证码
                                </button>
                            </div>
                            <!--<div class="layui-form-item fly-form-app">-->
                            <!--<span>或者直接使用社交账号快捷注册</span>-->
                            <!--<a href="" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})"-->
                            <!--class="iconfont icon-qq" title="QQ登入"></a>-->
                            <!--<a href="" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})"-->
                            <!--class="iconfont icon-weibo" title="微博登入"></a>-->
                            <!--</div>-->
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="fly-footer">
    <p><a href="http://fly.layui.com/" target="_blank">Fly社区</a> 2017 &copy; <a href="http://www.layui.com/"
                                                                                target="_blank">layui.com 出品</a></p>
    <p>
        <a href="http://fly.layui.com/jie/3147/" target="_blank">付费计划</a>
        <a href="http://fly.layui.com/jie/8157/" target="_blank">获取Fly社区模版</a>
        <a href="http://fly.layui.com/jie/2461/" target="_blank">微信公众号</a>
    </p>
</div>

<script src="/layui/layui.js"></script>
<!--th:inline="javascript" 这样模版引擎会将其中的逻辑进行替换-->
<script type="text/javascript" th:inline="javascript">
    layui.cache.page = 'user';
    layui.cache.user = {
        username: '游客'
        , uid: -1
        , avatar: '/images/avatar/00.jpg'
        , experience: 83                                   
        , sex: '男'
    };
    layui.config({
        version: "3.0.0"
        , base: '/mods/'
    }).extend({
        fly: 'index'
    }).use('fly', function () {
        var form = layui.form;
        var $ = layui.jquery;
        //表单提交 表单 Ajax 提交
        form.on('submit(register)', function (data) {
            if ($("#L_pass").val() == $("#L_repass").val()) {
                return true;
            }
            layer.msg("密码与确认密码不同，请重新输入");
            return false;
        });
        var msg = /*[[${session.msg}]]*/ undefined;
        if (msg && msg != null) {
            layer.msg(msg);
        }
        $("#sendEmail").click(function () {
            var email = $("#L_email").val();
            if (email.trim().length == 0) {
                layer.alert("请填写邮箱信息");
                $("L_email").focus();
            } else {
                $.ajax({
                    url: "/register/sendMail",
                    data: {email: email},
                    async: false,
                    dataType: "json"
                }).done(
                    function () {
                        layer.msg("邮件已发送请查收，验证码5分钟内有效");
                    }
                ).fail(
                    function (e) {
                        layer.alert("发送邮件失败，请联系管理员");
                        console.log(e);
                    }
                );
            }
        });
    });
</script>

</body>
</html>